<!DOCTYPE html>
<html>

	<head>
		<title>OpenAuth.net官方网站 - 最好用的.net权限工作流框架|.net core快速开发框架|.net core权限管理|.net core工作流</title>
		<meta name="Keywords" content="openauth.net,.net开源工作流,.NET开源权限管理">
		<meta name="Description" content="最好用的.net开源工作流框架,最好用的.NET开源权限管理框架">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<link rel="stylesheet" href="../../css/element-ui.css">
		<link href="../../font/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../../css/common.css">
		<style>
			.user .user-content {
				padding-bottom: 20px;
			}
			
			.user {
				min-height: 200px;
			}
			
			.user .user-content .avator img {
				width: 100px;
				height: 100px;
				border-radius: 50%;
			}
			
			.user .user-content .avator {
				text-align: center;
				padding-bottom: 0;
			}
			
			.user .user-content .avator .user-name {
				font-size: 15px;
				color: #333333;
				line-height: 50px;
			}
			
			.user .user-content .avator .tips {
				font-size: 14px;
				color: #888;
				line-height: 30px;
				padding-bottom: 20px;
			}
			
			.user .user-content .stars i {
				color: red;
				vertical-align: top;
				margin-top: 2px;
			}
			
			.user .user-content .stars {
				line-height: 20px;
			}
			
			.qustion-list {
				line-height: 40px;
				height: 40px;
				cursor: pointer;
			}
			
			.qustion-list .title {
				font-size: 15px;
				color: #212121;
			}
			
			.qustion-list .time {
				font-size: 12px;
				color: #888;
				padding-left: 20px;
			}
			
			.qustion-list .right {
				font-size: 12px;
				color: #666;
				padding-left: 20px;
				text-align: right;
				flex: 1;
			}
			.qustion-list .title{
				overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    }
		</style>
	</head>

	<body>
		<div id="app">
			<el-container>
				<el-header class="box-flex align-center">
					<app-header :current="current"></app-header>
				</el-header>
				<el-main>
					<div class="container">
						<el-row :gutter="20">
							<el-col :span="5" class="user m-t-m">
								<el-card shadow="never">
									<div class="user-content">
										<div class="avator">
											<img src='../../img/1.jpg' />
											<div class="user-name">
												{{user.name}}<em v-if="user.rmb" style="padding:0 ; color: #FF7200;">VIP{{user.rmb}}</em>
											</div>
											<div class="tips">
												<i class="el-icon-edit" @click="sendMsg">发送私信</i>
												<i class="el-icon-upload" @click="upUser" v-if="loginUser.auth==1">升级用户</i>
											</div>
										</div>
										<div class="stars">
											<i class="fa fa-star fa-fw" aria-hidden="true"></i>{{user.questioncnt}}
										</div>
									</div>
								</el-card>
							</el-col>
							<el-col :span="18" class="m-t-m">
								<el-card shadow="never">
									<el-tabs value="login">
										<el-tab-pane label="发表的问题" name="login">
											<template v-if="questions.length == 0">
												<div class="empty">
													暂无发表
												</div>
											</template>
											<template v-else>
												<template v-for="question in questions">
													<div class="box-flex qustion-list" @click="linkDetail(question)">
														<div class="title">
															{{question.title}}
														</div>
														<div class="time">
															{{question.time}}
														</div>
														<div class="right text-right">
															回答
															<span class="p-l-sm p-r-sm">{{ question.comment }}</span> 浏览{{ question.hits }}
														</div>
													</div>
												</template>
												<el-pagination @current-change="getNewQ" v-show="questionPagecnt>1" background layout="prev, pager, next" :page-count="questionPagecnt">
												</el-pagination>
											</template>
										</el-tab-pane>
										<el-tab-pane label="回答" name="register">
											<template v-if="answers.length == 0">
												<div class="empty">
													暂无回答
												</div>
											</template>
											<template v-else>
												<div v-for="question in answers" class="box-flex qustion-list" @click="linkDetail(question)">
													<div class="title">
														{{question.title}}
													</div>
													<div class="time">
														{{question.time}}
													</div>
													<div class="right text-right">
														<i class="fa fa-commenting fa-fw" aria-hidden="true"></i>
														<span class="p-l-sm p-r-sm">{{ question.comment }}</span>
														<i class="fa fa-fw fa-eye"></i>{{ question.hits }}
													</div>
												</div>
												<el-pagination @current-change="getNewAnswer" v-show="questionPagecnt>1" background layout="prev, pager, next" :page-count="questionPagecnt">
												</el-pagination>
											</template>
										</el-tab-pane>
									</el-tabs>
								</el-card>
							</el-col>
						</el-row>
					</div>
				</el-main>
				<el-footer height="100px">
					<app-footer></app-footer>
				</el-footer>
			</el-container>
		</div>

	</body>
	<!-- import Vue before Element -->
	<script src="../../js/vue.js"></script>

	<!-- import JavaScript -->
	<script src="../../js/element-ui.js"></script>
	<script src="../../js/axios.js"></script>
	<script src="../../js/header.js"></script>
	<script src="../../js/footer.js?v=2"></script>
	<script src="../../js/common.js"></script>
	<script>
		new Vue({
			data() {
				return {
					current: "user",
					user: {},
					questions: [],
					answers: [],
					questionPagecnt: 0,
					anPagecnt: 0,
					uid: '',
					isLogin: false,
					loginUser:{}

				}
			},
			created() {
				var isLogin = sessionStorage.isLogin
				if(isLogin === 'true') {
					var user = sessionStorage.user
					this.loginUser = JSON.parse(user);
					this.isLogin = true
				}

				var id = GetQueryString('id')
				this.uid = id
				this.getUser(id)
				this.getQuestionByUser({
					index: 1,
					size: 10,
					uid: id
				})
				this.getUserAnswer({
					index: 1,
					size: 10,
					uid: id
				})
			},
			methods: {
				upUser(){
					
					var _this = this;
					this.$prompt('请输入提升级别', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						}).then(({ value }) => {
							service({
								url: '/user/up',
								method: 'post',
								data:{	
									uid: _this.uid,
									rmb: value
								}
							}).then((res) => {
								_this.user.rmb = value
								this.$notify.success({
										title: '升级成功',
									})
							})
						
						})

				},
				sendMsg(){
					if(sessionStorage.isLogin !== 'true') {
						window.location.href = "../user/login.html"
						return
					} 

					var _this = this;
					this.$prompt('请输入发送内容', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						}).then(({ value }) => {
							service({
								url: '/message/send',
								method: 'post',
								data:{	
									to: _this.uid,
									content: value
								}
							}).then((res) => {
								this.$notify.success({
										title: '发送成功，可在消息列表里查看',
									})
							})
						
						})

				},

				getUser(id) {
					service({
						url: '/user/getbyid?uid=' + id,
						method: 'get',
					}).then((res) => {
						this.user = res.data
					})
				},
				getQuestionByUser(postData) {
					service({
						url: '/questions/getbyuser',
						method: 'post',
						data: postData
					}).then((res) => {
						this.questions = res.data.objects
						this.questionPagecnt = res.data.pagecnt
					})
				},
				getUserAnswer(postData) {
					service({
						url: '/questions/getbyuseranswer',
						method: 'post',
						data: postData
					}).then((res) => {
						this.answers = res.data.objects
						this.anPagecnt = res.data.pagecnt
					})
				},
				linkDetail(item) {
					window.location.href = "../question/detail.html?id=" + item.id
				},
				getNewAnswer(e) {
					this.getUserAnswer({
						index: e,
						size: 10,
						uid: this.uid
					})
				},
				getNewQ(e) {

					this.getQuestionByUser({
						index: e,
						size: 10,
						uid: this.uid
					})
				}
			}
		}).$mount('#app')
	</script>

</html>